<template>
  <div>
    <el-row>
      <el-card class="box-card" body-style="padding:20px 20px 10px 20px">
        <div slot="header" style="height:10px;" class="clearfix">
          <span>雷达：{{ initStationName }}</span>
        </div>
        <div>
          <div>{{ initProductName }}</div>
          <div>仰角：{{ initElev }}</div>
          <div>
            <span style="color:red;">{{ initDatetimeLabel }}</span>
          </div>
        </div>
      </el-card>
    </el-row>
    <el-row style="padding:20px;">
      <div style="display:table;margin: 0 auto;">
        <div style="display:table-cell;vertical-align: middle;">
          <el-slider
            v-model="mixMax"
            :max="15"
            vertical
            range
            show-stops
            height="185px"
            @change="sliderChange"
          />
        </div>
        <div style="display:table-cell;width:20px;vertical-align: middle;">&nbsp;</div>
        <div style="display:table-cell;vertical-align: middle;">
          <img :src="initLevelImg">
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'InfoBar',
  props: {
    logName: {
      type: String,
      default: 'RadarSelect:'
    },
    initStationName: {
      type: String,
      default: '广州'
    },
    initProductName: {
      type: String,
      default: '基本反射率（19）'
    },
    initElev: {
      type: String,
      default: '1.5'
    },
    initDatetimeLabel: {
      type: String,
      default: '01-01T00:00'
    },
    initLevelImg: {
      type: String,
      default: 'static/images/cinrad/19.png'
    },
    initMinColor: {
      type: Number,
      default: 0
    },
    initMaxColor: {
      type: Number,
      default: 15
    }
  },
  data() {
    return {
      mixMax: [this.initMinColor, this.initMaxColor],
      basemapValue: this.initBasemapValue
    }
  },
  /**
  watch: {
    // 如果 `initDatetime` 发生改变，这个函数就会运行
    initDatetimeLabel: function(newLabel, oldLabel) {
      console.debug(
        this.logName + 'initDatetime Change:' + newLabel + ':' + oldLabel
      )
    }
  },*/
  methods: {
    sliderChange(val) {
      console.debug(this.logName + 'sliderChange' + val)
      this.$emit('slider_change', val)
    }
  }
}
</script>
